概要
仮想の株式会社Light Lounge様からwebサイト作成の依頼を承りました。シンプルなデザインで女性の利用者を意識して利用者を増やして欲しいとの要望を実現することを常に念頭に置き作成いたしました。
- 制作期間：3週間
- 担当箇所：デザイン、コーディング
- 使用ツール：Illustrator、Photoshop、figma、html、CSS、jQuery
- URL：https://egawasadanori-lightlounge.netlify.app
制作プロセス
市場調査
3C分析、ポジショニングマップを作成し、市場調査を行いました。クライアントの競合４社と営業時間の長さ、価格帯で比較した結果、クライアントが最も低価格、営業時間が最も長いことが判明しました。
市場調査をもとに、どの様なニーズを持つユーザーを対象にデザインを作れば良いか、以下の様に具体的なターゲット象を設定。またこのターゲット象を使用しディレクターを通じクライアント(模擬)と認識を共有しサイトのイメージのすり合わせを行いました。
情報設計
事前にディレクターが行ったヒアリングシートと設定したターゲット象をもとに情報設計の方針を決定し、方針をもとにFVを複数案作成しディレクターとミーティングを行い、クライアントとのデザインのイメージのすり合わせを行いました。
デザイン
長く使える空間であることをアピールするため低価格であること、屋内の写真を多用し、安心感を与えシンプルにするためメインカラーに薄いワインレッドを使用し、要素に丸角をつけて柔らかさと安心感を演出しました。またナビバーは縦にすることでFVの写真を目立つ様に調整しました。
デザイン修正
ディレクターより
- ①全体的にシンプルすぎる
- ②写真はまとまって見れた方がいい
- ③planとinformationの背景が写真だと要素が目立たない
- ④news部分は一目でnewsとわかる様にして欲しい
- ⑤FAQの部分のバックの装飾がこのサイトで初めて出てきたもので悪目立ちしている
とのご指摘受け以下の様のに改善しました。
- ①コンテンツタイトルにあしらいをつけ、コンテンツのbgcを順番に変更し可読性をあげる
- ②Galleryコンテンツを新たに追加
- ③背景写真を削除
- ④写真を使用し１記事ごとにコンテンツを作る
- ⑤装飾を削除。さらに質問を分類分けし可読性をあげる
配色
- テキストカラー：白のベースカラーに対し文字を目立たせるため
- ベースカラー ：余白をとったシンプルなサイトを作るため
- メインカラー ：暖かいい、落ち着いたイメージを持たせるため
- アクセントカラー：使用なし
フォント
コーディング
スマートフォンでも閲覧できるよう、レスポンシブ対応のコーディングを行いました。
最終的な制作物
PC版
SP版
